<template>
    <div>
        <el-form :model="form" :rules="rules" ref="deptForm" label-width="120px">
            <el-form-item prop="name" label="部门名称">
                <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
            </el-form-item>
            <el-form-item prop="code" label="部门编码">
                <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
            </el-form-item>
            <el-form-item prop="manager" label="部门负责人">
                <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
                    <el-option v-for="item in employees" :key="item.id" :value="item.username" :label="item.username" />
                </el-select>
            </el-form-item>
            <el-form-item prop="introduce" label="部门介绍">
                <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
                <el-button size="small" @click="hCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { addDepartment, getDepartDetail, updataDepartDetail } from '@/api/departments';
import { getEmployeeSimple } from '@/api/employees';

export default {
    data() {
        const validName = (rule, value, callback) => {
            let nameList
            if (this.isEdit) {
                // let a = this.originList.filter(item => item.id === this.id)[0].pid
                let pid = this.originList.find(item => item.id === this.id).pid
                nameList = this.originList.filter(item => item.pid === pid && item.id !== this.id).map(item => item.name)
            } else {
                nameList = this.originList.filter(item => item.pid == this.id).map(item => item.name)
            }
            console.log('被占用的名字列表', nameList);
            nameList.includes(value) ? callback(new Error(`${value}已存在`)) : callback()
        }
        const validCode = (rule, value, callback) => {
            // 使用some()
            // let flag
            // if (this.isEdit) {
            //     console.log(this.id);
            //     flag = this.originList.filter(item => item.id != this.id).some(item => item.code == value)
            // } else {

            //     flag = this.originList.some(item => item.code == value)
            // }
            // flag ? callback(new Error(`${value}已存在`)) : callback()

            // 使用map()


            let codeList
            let cList
            if (this.isEdit) {
                codeList = this.originList.filter(item => item.id !== this.id).map(item => item.code)
            } else {
                codeList = this.originList.map(item => item.code)

            }
            codeList.includes(value) ? callback(new Error(`${value}已存在`)) : callback()

        }
        return {
            form: {
                name: '', // 部门名称
                code: '', // 部门编码
                manager: '', // 部门管理者
                introduce: '' // 部门介绍
            },
            employees: [],
            rules: {
                name: [
                    { required: true, message: '部门名称不能为空', trigger: 'blur' },
                    { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' },
                    { validator: validName, trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '部门编码不能为空', trigger: 'blur' },
                    { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' },
                    { validator: validCode, trigger: 'blur' }
                ],
                manager: [
                    { required: true, message: '部门负责人不能为空', trigger: 'change' }
                ],
                introduce: [
                    { required: true, message: '部门介绍不能为空', trigger: 'blur' },
                    { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: 'blur' }
                ]
            }
        }
    },
    // props: {
    //     id: {
    //         type: String,

    //     }
    // },
    props: ['id', 'isEdit', 'originList'],
    created() {
        this.loadEmployee()
        this.loadDepartmentDetail()
        console.log('created');

    },
    methods: {
        async loadDepartmentDetail() {
            if (!this.isEdit) return
            const res = await getDepartDetail(this.id)
            console.log(res);
            this.form = res.data
        },
        async hSubmit() {
            this.$refs.deptForm.validate(valid => {
                if (valid) {
                    if (this.isEdit) {
                        this.doEdit()
                    } else {
                        this.doAdd()
                    }
                }
            })



        },
        async doAdd() {
            try {
                this.form.pid = this.id
                const res = await addDepartment(this.form)
                console.log(res);
                this.$message.success(res.message)
                this.$emit('success')
                // this.form = ''
            } catch (error) {
                this.$message.error(error.message)
            }
        },
        async doEdit() {
            try {
                const res = await updataDepartDetail(this.form)
                console.log(res);
                this.$message.success(res.message)
                this.$emit('success')
                // this.form = ''
            } catch (error) {
                this.$message.error(error.message)
            }
        },
        hCancel() {
            this.$emit('close')

        },
        async loadEmployee() {
            try {
                let res = await getEmployeeSimple()
                this.employees = res.data
            } catch (error) {
                console.log(error);
            }

        }

    }
}
</script>

<style scoped lang='scss'></style>>